<template>
    <view style="height: 100%">
        <view class="pot">
            <van-tabs :active="active" @click="onChange" title-inactive-color="#283043" title-active-color="#1050C7" color="#1050C7" line-width="28px">
                <van-tab title="全部"></van-tab>
                <van-tab title="待付款"></van-tab>
                <van-tab title="待发货"></van-tab>
                <van-tab title="待收货"></van-tab>
                <van-tab title="待评价"></van-tab>
                <van-tab title="已完成"></van-tab>
                <van-tab title="已取消"></van-tab>
            </van-tabs>
        </view>

        <ul class="db" v-if="list.length != 0">
            <block v-for="(item, index) in list" :key="index">
                <li class="db bgcf br12 pd015 mb10">
                    <navigator class="db" :url="'/pages/myOrder/orderDetail?id=' + item.id" hover-class="none" open-type="navigate">
                        <view class="df ac sb h44 bbf1">
                            <p class="f12 c9d">订单号：{{ item.order_sn }}</p>
                            <view>
                                <p class="f12 c10" v-if="item.status == 1">待支付</p>
                                <p class="f12 c10" v-if="item.status == 2">待发货</p>
                                <p class="f12 c10" v-if="item.status == 3">待收货</p>
                                <p class="f12 c10" v-if="item.status == 4">待评价</p>
                                <p class="f12 c10" v-if="item.status == 5">已完成</p>
                                <p class="f12 c9d" v-if="item.status == 6">已取消</p>
                                <!-- <p class='f12 cff8'>退款审核中</p>
						<p class='f12 c3a'>退款成功</p>
						<p class='f12 cf5'>退款已驳回</p> -->
                            </view>
                        </view>

                        <block v-for="(t2, i2) in item.OrderGoods" :key="i2">
                            <view class="pd150 bbf1 df">
                                <image class="img72 br8 mr12"  referrerPolicy='no-referrer' :src="t2.thumb" />
                                <view class="f1">
                                    <h2 class="db w224 ovh f14 c28 f500">{{ t2.title }}</h2>
                                    <P class="f12 c9d db mt8">{{ t2.sku_title }}</P>
                                    <view class="df ac sb mt12">
                                        <p class="f12 f500 c28">¥{{ t2.price }}</p>
                                        <p class="f12 c9d">×{{ t2.number }}</p>
                                    </view>
                                </view>
                            </view>
                        </block>
                    </navigator>
                    <view class="pd150">
                        <view class="df ac sb">
                            <P class="f12 c9d">{{ item.created_at }}</P>
                            <view class="df ac c28 f12">
                                <span>总价:</span>
                                <span class="f600">¥{{ item.need_price }}</span>
                            </view>
                        </view>

                        <view class="mt12 df ac sb">
                            <p></p>
                            <view class="df ac">
                                <p class="order-but" @tap.native="onCancel($event, { id: item.id })" v-if="item.status == 1" :data-id="item.id">取消订单</p>
                                <p class="order-but order-but1 ml8" v-if="item.status == 1" @tap.native="onBuy($event, { id: item.id })" :data-id="item.id">立即支付</p>
                                <p class="order-but order-but1 ml8" v-if="item.status == 3" @tap.native="onConfirm($event, { id: item.id })" :data-id="item.id">确认收货</p>
                                <p class="order-but order-but1 ml8" @tap.native="onEvaluate($event, { id: item.id })" :data-id="item.id" v-if="item.is_evaluate == 1">评价</p>
                            </view>
                        </view>
                    </view>
                </li>
            </block>
        </ul>

        <view class="df jc mt30" v-else>
            <image src="https://wx.xtwaixie.com/img/empty.png" class="w50" mode="aspectFit"></image>
        </view>
    </view>
</template>

<script>
const http = require('../../utils/http');
export default {
    data() {
        return {
            active: 0,
            list: [],
            page: 1,
            pagesize: 10,
            pageTotal: '',
            i2: '',

            t2: {
                thumb: '',
                title: '',
                sku_title: '',
                price: '',
                number: ''
            }
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad(options) {
        this.setData({
            active: Number(options.act)
        });
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow(options) {
        this.setData({
            list: [],
            page: 1
        });
        this.getList();
    },
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {
        if (this.pageTotal > this.page) {
            this.setData({
                page: this.page + 1
            });
            this.getList();
        } else {
            uni.showToast({
                title: '没有更多了~',
                icon: 'none'
            });
        }
    },
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {},
    methods: {
        getList() {
			const token = uni.getStorageSync('token')
			if(!token){
				return
			}
            let data = {
                page: this.page,
                pagesize: this.pagesize,
                status: this.active
            };
            http.request('order/orderList', data)
                .then((res) => {
                    res.data.list.forEach((i) => {
                        this.list.push(i);
                    });
                    this.setData({
                        list: this.list,
                        pageTotal: res.data.pageTotal
                    });
                })
                .catch((res) => {
                    uni.showToast({
                        title: res.message,
                        icon: 'none'
                    });
                });
        },

        onChange(event) {
            this.setData({
                active: event.detail.index,
                page: 1,
                list: []
            });
            this.getList();
        },

        // 取消订单
        onCancel(e, _dataset) {
            /* ---处理dataset begin--- */
            this.handleDataset(e, _dataset);
            /* ---处理dataset end--- */
            let id = e.currentTarget.dataset.id;
            let that = this;
            uni.showModal({
                title: '取消',
                content: '您确认要取消该订单吗？',
                success(res) {
                    if (res.confirm) {
                        http.request('order/cancel', {
                            id: id
                        })
                            .then((res) => {
                                uni.showToast({
                                    title: res.message,
                                    icon: 'none'
                                });
                                that.setData({
                                    page: 1,
                                    list: []
                                });
                                that.getList();
                            })
                            .catch((res) => {
                                uni.showToast({
                                    title: res.message,
                                    icon: 'none'
                                });
                            });
                    } else if (res.cancel) {
                        console.log('用户点击取消');
                    }
                }
            });
        },

        // 确认收货
        onConfirm(e, _dataset) {
            /* ---处理dataset begin--- */
            this.handleDataset(e, _dataset);
            /* ---处理dataset end--- */
            let id = e.currentTarget.dataset.id;
            let that = this;
            uni.showModal({
                title: '确认收货',
                content: '您确认要确认收货吗？',
                success(res) {
                    if (res.confirm) {
                        http.request('order/okOrder', {
                            id: id
                        })
                            .then((res) => {
                                uni.showToast({
                                    title: res.message,
                                    icon: 'none'
                                });
                                that.setData({
                                    page: 1,
                                    list: []
                                });
                                that.getList();
                            })
                            .catch((res) => {
                                uni.showToast({
                                    title: res.message,
                                    icon: 'none'
                                });
                            });
                    } else if (res.cancel) {
                        console.log('用户点击取消');
                    }
                }
            });
        },

        // 支付订单
        onBuy(e, _dataset) {
            /* ---处理dataset begin--- */
            this.handleDataset(e, _dataset);
            /* ---处理dataset end--- */
            let id = e.currentTarget.dataset.id;
            http.request('order/orderPay', {
                id: id
            })
                .then((res) => {
                    uni.requestPayment({
                        timeStamp: res.data.wechatPay.timeStamp,
                        nonceStr: res.data.wechatPay.nonceStr,
                        package: res.data.wechatPay.package,
                        signType: res.data.wechatPay.signType,
                        paySign: res.data.wechatPay.sign,
                        success: (res) => {
                            uni.reLaunch({
                                url: '/pages/order/orderSuccess'
                            });
                        },
                        fail: (res) => {
                            console.log(res);
                            uni.showToast({
                                title: '支付失败',
                                icon: 'none'
                            });
                        }
                    });
                })
                .catch((res) => {
                    uni.showToast({
                        title: res.message,
                        icon: 'none'
                    });
                });
        },

        //  去评价
        onEvaluate(e, _dataset) {
            /* ---处理dataset begin--- */
            this.handleDataset(e, _dataset);
            /* ---处理dataset end--- */
            let id = e.currentTarget.dataset.id;
            uni.navigateTo({
                url: '/pages/myOrder/evaluate?id=' + id
            });
        }
    }
};
</script>
<style>
@import './orderList.css';
</style>
